<!--
 * @Author: David Ma
 * @FilePath: \huaxia-real-estate-web\src\pages\managements\staff-managements.vue
 * @LastEditors: David Ma
 * @Description: 该文件用于管理客户信息
 * @Date: 2023-11-29 10:43:54
-->
<template>
  <!-- 新增员工对话框 -->
  <v-dialog v-model="addDialog" max-width="35rem">
    <v-card>
      <v-card-title>新增员工</v-card-title>
      <v-card-text>
        <VForm @submit.prevent="() => {}">
          <VRow>
            <VCol cols="12" md="6">
              <VTextField
                prepend-inner-icon="bx-user"
                v-model="addForm.stfName"
                label="员工姓名"
                placeholder="John"
              />
            </VCol>

            <VCol cols="12" md="6">
            <VSelect
             prepend-inner-icon="bx-male-female"
              v-model="addForm.stfSex"
              :items="sexOptions"
              label="选择性别"
            />
            </VCol>
            <VCol cols="12" md="12">
              <VSelect
              v-model="addForm.dpNo"
              :items="departmentItems"
              item-title="text"
              item-value="value"
              label="选择部门"
          
            />
            </VCol>
            <VCol cols="12" md="6">
              <VTextField
              prepend-inner-icon="bx-phone"
                v-model="addForm.stfTel"
                label="Mobile"
                placeholder="+1 123 456 7890"
                type="number"
              />
            </VCol>

            <VCol cols="12" md="6">
              <VTextField
              prepend-inner-icon="bx-message-square"
                v-model="addForm.stfQq"
                label="QQ"
                placeholder="请输入QQ"
              />
            </VCol>

            <VCol cols="12" md="6">
              <VTextField
              prepend-inner-icon="bx-envelope"
                v-model="addForm.stfEmail"
                label="邮箱"
                placeholder="请输入邮箱"
                type="number"
              />
            </VCol>

            <VCol cols="12" md="6">
              <VTextField
              prepend-inner-icon="bx-user"
                v-model="addForm.stfIdno"
                label="身份证号"
                placeholder="请输入身份证号"
              />
            </VCol>

            <VCol cols="12" md="6">
              <VTextField
              prepend-inner-icon="bx-home"
                v-model="addForm.stfLocation"
                label="住址"
                placeholder="请输入住址"

              />
            </VCol>

            <VCol cols="12" md="6">
              <VTextField
              prepend-inner-icon="bx-card"
                v-model="addForm.stfCardno"
                label="工资卡号"
                placeholder="请输入工资卡号"
              />
            </VCol>


          </VRow>
        </VForm>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="addDialog = false">取消</v-btn>
        <v-btn @click="createStaff">创建</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
  <!-- 修改员工信息对话框 -->
  <v-dialog v-model="modifyDialog" max-width="35rem">
    <v-card>
      <v-card-title>修改客户信息</v-card-title>

      <v-card-text>
        <VForm @submit.prevent="() => {}">
           <VRow>
            <VCol cols="12" md="6">
              <VTextField
                prepend-inner-icon="bx-user"
                v-model="modifyForm.stfName"
                label="员工姓名"
                placeholder="John"
              />
            </VCol>

            <VCol cols="12" md="6">
            <VSelect
             prepend-inner-icon="bx-male-female"
              v-model="modifyForm.stfSex"
              :items="sexOptions"
              label="选择性别"
            />
            </VCol>

            <VCol cols="12" md="6">
              <VTextField
              prepend-inner-icon="bx-phone"
                v-model="modifyForm.stfTel"
                label="Mobile"
                placeholder="+1 123 456 7890"
                
              />
            </VCol>

            <VCol cols="12" md="6">
              <VTextField
              prepend-inner-icon="bx-message-square"
                v-model="modifyForm.stfQq"
                label="QQ"
                placeholder="请输入QQ"
              />
            </VCol>

            <VCol cols="12" md="6">
              <VTextField
              prepend-inner-icon="bx-envelope"
                v-model="modifyForm.stfEmail"
                label="邮箱"
                placeholder="请输入邮箱"
                
              />
            </VCol>

            <VCol cols="12" md="6">
              <VTextField
              prepend-inner-icon="bx-user"
                v-model="modifyForm.stfIdno"
                label="身份证号"
                
                placeholder="············"
              />
            </VCol>

            <VCol cols="12" md="6">
              <VTextField
              prepend-inner-icon="bx-home"
                v-model="modifyForm.stfLocation"
                label="地址"
                placeholder="请输入住址"
                
              />
            </VCol>

            <VCol cols="12" md="6">
              <VTextField
              prepend-inner-icon="bx-card"
                v-model="modifyForm.stfCardno"
                label="工资卡号"
                
                placeholder="请输入工资卡号"
              />
            </VCol>

          </VRow>
        </VForm>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="modifyDialog = false">取消</v-btn>
        <v-btn @click="modifyStaff">修改</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
  <!-- 停用员工对话框 -->
  <v-dialog v-model="deleteDialog" max-width="35rem">
    <v-card>
      <v-card-title>停用员工</v-card-title>
      <v-card-text> 您确定要停用该员工的使用权限？ </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="deleteDialog = false">取消</v-btn>
        <v-btn @click="deleteStaff">停用</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
  <VRow>
    <VCol cols="12">
      <VCard>
        <VRow>
          <!-- 👉 First Name -->
          <span class="d-flex align-center ml-10">职工ID</span>
          <VCol cols="12" md="3">
            <VTextField
              v-model="searchForm.stfNo"
              label="职工ID"
              placeholder="John"
              class="my-5"
            />
          </VCol>
          <span class="d-flex align-center">职工姓名</span>
          <!-- 👉 Last Name -->
          <VCol cols="12" md="3">
            <VTextField
              v-model="searchForm.stfName"
              label="职工姓名"
              placeholder="Doe"
              class="my-5"
            />
          </VCol>
          <!-- 👉 选择框 -->
          <span class="d-flex align-center">职工部门</span>
          <VCol cols="12" md="3">
            <VSelect
              v-model="searchForm.dpNo"
              :items="departmentItems"
              item-title="text"
              item-value="value"
              label="选择部门"
              class="my-5"
            />
          </VCol>
          <VCol cols="12" md="1" class="d-flex align-center">
            <v-btn color="primary" @click="search">搜索</v-btn>
          </VCol>
        </VRow>
      </VCard>
    </VCol>
    <VCol cols="12">
      <VCard>
        <div class="d-flex justify-space-between align-center mt-4 mb-4">
          <VCardTitle>员工管理页面</VCardTitle>
          <v-btn color="primary" @click="reset" style="margin-right: 50rem;"
            >重置</v-btn
          >
          <v-btn
            icon="bx-plus"
            size="small"
            style="margin-right: 6.75rem;"
            @click="addDialog = true"
          ></v-btn>
        </div>

        <VDivider />
        <VTable style="height: 520px;" fixed-header>
          <thead>
            <tr>
              <th class="text-uppercase">员工ID</th>
              <th>姓名</th>
              <th>性别</th>
              <th>电话号</th>
              <th>QQ</th>
              <th>邮箱</th>
              <th>身份证号</th>
              <th>住址</th>
              <th>部门</th>
              <th>级别</th>
              <th>工资卡号</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="item in staff" style="white-space: nowrap;">
              <td>
                {{ item.stfNo }}
              </td>
              <td class="text-center">
                {{ item.stfName }}
              </td>
              <td class="text-center">
                {{ item.stfSex }}
              </td>
              <td class="text-center">
                {{ item.stfTel }}
              </td>
              <td class="text-center">
                {{ item.stfQq }}
              </td>
              <td class="text-center">
                {{ item.stfEmail }}
              </td>
              <td class="text-center">
                {{ item.stfIdno }}
              </td>
              <td class="text-center">
                {{ item.stfLocation }}
              </td>
              <td class="text-center">
                {{ displayContent(item.dpNo) }}
              </td>
              <td class="text-center">
                {{ displayContent2(item.stfLevel) }}
              </td>
              <td class="text-center">
                {{ item.stfCardno }}
              </td>
              <td class="text-center">
                {{ item.stfStatus === "1" ? "在职" : "离职" }}
              </td>
              <td class="text-center" style="min-width: 200px;">
                <VBtn @click="openModifyDialog(item)">修改</VBtn>
                <VBtn @click="openDeleteDialog(item)" class="ml-5">停用</VBtn>
              </td>
            </tr>
          </tbody>
        </VTable>
      </VCard>
    </VCol>
  </VRow>
</template>

<script setup lang="ts">
import { Staff, addStaff, deleteStaffInfo, getAllStaff, getStaffsByCondition, modifyStaffInfo } from "@/api/staff";
import { Message } from "@arco-design/web-vue";
const sexOptions = ref<Array<string>>(['男', '女', '其他']);

const addDialog = ref(false);
const modifyDialog = ref(false);
const deleteDialog = ref(false);
const departmentItems = [
  { text: '前台', value: 1 },
  { text: '渲染', value: 3 },
  { text: '后期', value: 4 },
  { text: '建模', value: 2 }
  
];
const displayContent =  (dpNo: string) => {
    switch (dpNo) {
        case "1":
            return '前台';
        case "2":
            return '建模';
        case "3":
            return '渲染';
        case "4":
            return '后期';
        case "5":
            return '老板';
        default:
            return `${dpNo}`;
    }
}
const displayContent2 =  (levelNo: string) => {
    switch (levelNo) {
        case "0":
            return '员工';
        case "1":
            return '主管';    
        case "2":
            return '老手';
        case "3":
            return '新手';
        default:
            return `${levelNo}`;
    }
}
const staff = ref<Staff>({});
//定义模糊搜索表单
const searchForm = ref<Staff>({});
//定义addForm表单
const addForm = ref<Staff>({});
//定义modifyForm表单
const modifyForm = ref<Staff>({});
//定义deleteForm表单
const deleteForm = ref<Staff>({});
onMounted(async () => {
  try {
    // 获取所有客户
    const res = await getAllStaff();
    if (res.data.code === 200) {
      staff.value = res.data.data;
      Message.success("获取数据成功");
    } else {
      Message.error("获取数据失败");
    }
  } catch (err) {
    Message.error("获取数据失败");
  }
});

//模糊搜索
const search = async () => {
  try {
    const res = await getStaffsByCondition(searchForm.value);
    staff.value = res.data.data;
  } catch (err) {
    Message.error("获取数据失败");
  }
};
//添加客户
const createStaff = async () => {
  try {

    const response = await addStaff(addForm.value);
    console.log(response)
    if (response.data.code === 200) {
      Message.success("员工添加成功");
      addDialog.value = false;
    // 获取所有客户
    const res = await getAllStaff();
    staff.value = res.data.data;
    } else {
      Message.error("添加员工失败");
    }
  } catch (error) {
    Message.error("网络错误或服务器异常");
  }
};
const openModifyDialog = (item: Staff) => {
  modifyDialog.value = true;
  modifyForm.value = item;
};
const openDeleteDialog = (item: Staff) => {
  deleteDialog.value = true;
  deleteForm.value = item;
};
// 修改员工信息
const modifyStaff = async () => {
  try {
    const response = await modifyStaffInfo(modifyForm.value);
    if (response.data.code === 200) {
      Message.success("员工信息修改成功");
      modifyDialog.value = false;
      // 刷新所有客户
      const res = await getAllStaff();
      staff.value = res.data.data;
    } else {
      Message.error("员工信息修改失败");
    }
  } catch (error) {
    Message.error("网络错误或服务器异常");
  }
};
// 删除员工
const deleteStaff = async () => {
  try {
    const response = await deleteStaffInfo(deleteForm.value.stfNo);
    console.log(response)
    if (response.data.code === 200) {
      Message.success("员工停用成功");
      deleteDialog.value = false;
      // 刷新所有客户
     // 获取所有客户
    const res = await getAllStaff();
    staff.value = res.data.data;
    } else {
      Message.error("员工停用失败");
    }
  } catch (error) {
    Message.error("网络错误或服务器异常");
  }
};
//重置
const reset = async () => {
  try {
    // 获取所有客户
    const res = await getAllStaff();
    if (res.data.code === 200) {
      staff.value = res.data.data;
      Message.success("重置成功");
    } else {
      Message.error("重置失败");
    }
  } catch (err) {
    Message.error("获取数据失败");
  }
};
</script>
